<template>
  <div>
    <div class="top-box">
      <el-button type="success" @click="add">添加新闻分类</el-button>
    </div>
    <loading v-if="loading"></loading>
    <div class="pd" v-else>
      <el-table :data="listData.list" border fit highlight-current-row style="width:100%">
        <el-table-column label="ID" prop="id" width="120"></el-table-column>
        <el-table-column label="名称" prop="name"></el-table-column>
        <el-table-column label="英文名称" prop="en_name"></el-table-column>
        <el-table-column label="别名" prop="name_alias"></el-table-column>
        <el-table-column label="父分类" prop="parent_cate_name"></el-table-column>
        <el-table-column label="类型" prop="type_name"></el-table-column>
        <el-table-column label="内容类型" prop="content_type"></el-table-column>
        <el-table-column label="排序值" prop="sort"></el-table-column>
        <el-table-column label="内容排序值" prop="sort"></el-table-column>
        <el-table-column label="操作">
          <template scope="scope">
            <i class="i-icon icon-revamp" title="修改"  @click="edit(scope.row)"></i>
            <i class="i-icon icon-delete" title="删除"  @click="remove(scope.row.id)"></i>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination
          @current-change="handleChange"
          :current-page.sync="pageall"
          :page-size="listlimit"
          layout="total, prev, pager, next, jumper"
          :total="listData.total">
        </el-pagination>
      </div>
    </div>
    <el-dialog title="添加分类" :visible.sync="showAddModelFlag" size="small">
      <div class="input-group">
        <label><i>*</i>分类名称：</label>
        <div class="input-group-box"><el-input v-model="addParam.name" placeholder="输入分类名称"></el-input></div>
      </div>
      <div class="input-group">
        <label><i>*</i>英文名称：</label>
        <div class="input-group-box"><el-input v-model="addParam.en_name" placeholder="输入分类英文名称"></el-input></div>
      </div>
      <div class="input-group">
        <label><i>*</i>分类别名：</label>
        <div class="input-group-box"><el-input v-model="addParam.name_alias" placeholder="输入分类别名"></el-input></div>
      </div>
      <div class="input-group">
        <label>父分类：</label>
        <div class="input-group-box">
          <el-select v-model="addParam.pid" placeholder="所属分类" class="user-input">
            <el-option
              v-for="item in firstLevelOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="input-group">
        <label>类型：</label>
        <div class="input-group-box">
          <el-radio-group v-model="addParam.type">
            <el-radio :key="0" :label="0">新闻类</el-radio>
            <el-radio :key="1" :label="1">视频类</el-radio>
            <el-radio :key="2" :label="2">人物类</el-radio>
          </el-radio-group>
        </div>
      </div>
      <div class="input-group mt">
        <label>分类简介：</label>
        <div class="input-group-box"><el-input v-model="addParam.note" type="textarea" :rows="5" placeholder="输入分类简介（100字以内）"></el-input></div>
      </div>
      <div class="input-group">
        <label><i>*</i>排序值：</label>
        <div class="input-group-box"><el-input v-model="addParam.sort" placeholder="输入排序值"></el-input></div>
      </div>
      <div class="input-group">
        <label><i>*</i>导航排版类型：</label>
        <div class="input-group-box">
          <el-select v-model="addParam.show_type" placeholder="请选择导航排版类型">
            <el-option
              v-for="item in showTypes"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="input-group">
        <label><i>*</i>导航中显示：</label>
        <div class="input-group-box">
          <el-select v-model="addParam.is_show" placeholder="请选择是否在导航中显示">
            <el-option
              v-for="item in navShowTypes"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="input-group">
        <label><i>*</i>内容类型：</label>
        <el-select v-model="addParam.content_type" placeholder="请选择内容类型">
          <el-option
            v-for="item in contentTypes"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </div>
      <div class="input-group">
        <label><i>*</i>内容排序值：</label>
        <div class="input-group-box"><el-input v-model="addParam.content_sort" placeholder="输入内容排序值" type="number" value="0"></el-input></div>
      </div>
      <p class="category-tip" >* 标记为必填项</p>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showAddModelFlag = false">取 消</el-button>
        <el-button type="primary" @click="confirmAdd">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="修改分类" :visible.sync="showUpdateModelFlag" size="small">
      <div class="input-group">
        <label><i>*</i>分类名称：</label>
        <div class="input-group-box"><el-input v-model="updateParam.name" placeholder="输入分类名称"></el-input></div>
      </div>
      <div class="input-group">
        <label><i>*</i>分类英文名称：</label>
        <div class="input-group-box"><el-input v-model="updateParam.en_name" placeholder="输入分类英文名称"></el-input></div>
      </div>
      <div class="input-group">
        <label><i>*</i>分类别名：</label>
        <div class="input-group-box"><el-input v-model="updateParam.name_alias" placeholder="输入分类别名"></el-input></div>
      </div>
      <div class="input-group">
        <label>父分类：</label>
        <div class="input-group-box">
          <el-select v-model="updateParam.pid" placeholder="所属分类" class="user-input">
            <el-option
              v-for="item in firstLevelOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="input-group">
        <label>类型：</label>
        <div class="input-group-box">
          <el-radio-group v-model="updateParam.type">
            <el-radio :key="0" :label="0">新闻类</el-radio>
            <el-radio :key="1" :label="1">视频类</el-radio>
            <el-radio :key="2" :label="2">人物类</el-radio>
          </el-radio-group>
          <!--<el-radio v-model="updateParam.type" label="0">新闻类</el-radio>
          <el-radio v-model="updateParam.type" label="1">视频类</el-radio>-->
        </div>
      </div>
      <div class="input-group mt">
        <label>分类简介：</label>
        <div class="input-group-box"><el-input v-model="updateParam.note" type="textarea" :rows="5" placeholder="输入分类简介（200字以内）"></el-input></div>
      </div>
      <div class="input-group">
        <label><i>*</i>排序值：</label>
        <div class="input-group-box"><el-input v-model="updateParam.sort" placeholder="输入排序值"></el-input></div>
      </div>
      <div class="input-group">
        <label><i>*</i>导航排版类型：</label>
        <el-select v-model="updateParam.show_type" placeholder="请选择导航排版类型">
          <el-option
            v-for="item in showTypes"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </div>
      <div class="input-group">
        <label><i>*</i>导航中显示：</label>
        <el-select v-model="updateParam.is_show" placeholder="请选择是否在导航中显示">
          <el-option
            v-for="item in navShowTypes"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </div>
      <div class="input-group">
        <label><i>*</i>内容类型：</label>
        <el-select v-model="updateParam.content_type" placeholder="请选择内容类型">
          <el-option
            v-for="item in contentTypes"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </div>
      <div class="input-group">
        <label><i>*</i>内容排序值：</label>
        <div class="input-group-box"><el-input v-model="updateParam.content_sort" placeholder="输入内容排序值" type="number"></el-input></div>
      </div>

      <p class="category-tip" >* 标记为必填项</p>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showUpdateModelFlag = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<style>
.category-tip {
  color: #cc1d00;
  font-size: 12px;
  text-align: right;
}
</style>
<script>
import apiConfig from '../../utils/apiconfig'
import api from '../../utils/api'
import helper from '../../utils/helper'
import loading from '../../components/loading'
export default {
  data () {
    return {
      listData: [],
      listlimit: 20,
      pageall: 1,
      page: 1,
      loading: true,
      showAddModelFlag: false,
      showUpdateModelFlag: false,
      firstLevelOptions: [],
      showTypes: [
        {
          id: 'HEADLINE',
          name: '头条版式'
        },
        {
          id: 'SUMMARY',
          name: '预览版式'
        }
      ],
      navShowTypes: [
        {
          id: 1,
          name: '是'
        },
        {
          id: 0,
          name: '否'
        }
      ],
      contentTypes: [
        {
          id: 'NEWS',
          name: '新闻'
        },
        {
          id: 'AUTHOR',
          name: '作者'
        }
      ],
      addParam: {
        name: '',
        en_name: '',
        name_alias: '',
        pid: '',
        type: '',
        sort: '',
        show_type: '',
        note: '',
        is_show: '',
        content_type: '',
        content_sort: 0
      },
      updateParam: {
        id: '',
        name: '',
        en_name: '',
        name_alias: '',
        pid: '',
        type: '',
        sort: '',
        show_type: '',
        note: '',
        is_show: '',
        content_type: '',
        content_sort: 0
      }
    }
  },
  created () {
    this.getList()
    this.getFirstLevelOption()
  },
  components: {
    loading
  },
  methods: {
    getList () {
      var param = {
        page: this.page
      }
      api.GET(helper.getManageApiUrl(apiConfig.newsCategoryList), param, res => {
        this.listData = res
        this.loading = false
      }, res => {
        console.log(res)
      })
    },
    getFirstLevelOption () {
      var param = {
        param: ''
      }
      api.GET(helper.getManageApiUrl(apiConfig.newsCategoryFirstLevel), param, res => {
        this.firstLevelOptions = res
      }, res => {
        console.log(res)
      })
    },
    handleChange (val) {
      this.page = val
      this.getList()
    },
    add () {
      this.showAddModelFlag = true
    },
    confirmAdd () {
      if (this.addParam.name === '') {
        this.$notify({
          title: '提示',
          message: '没有填写分类名称',
          type: 'error',
          duration: 1500
        })
        return false
      }
      var param = {
        name: this.addParam.name,
        en_name: this.addParam.en_name,
        name_alias: this.addParam.name_alias,
        pid: this.addParam.pid,
        type: this.addParam.type,
        sort: this.addParam.sort,
        show_type: this.addParam.show_type,
        note: this.addParam.note,
        is_show: this.addParam.is_show,
        content_type: this.addParam.content_type,
        content_sort: this.addParam.content_sort
      }
      api.GET(helper.getManageApiUrl(apiConfig.addNewsCategory), param, res => {
        this.$notify({
          title: '成功',
          message: '添加成功',
          type: 'success',
          duration: 1500
        })
        this.addParam.name = ''
        this.addParam.en_name = ''
        this.addParam.name_alias = ''
        this.addParam.pid = ''
        this.addParam.type = ''
        this.addParam.sort = ''
        this.addParam.show_type = ''
        this.addParam.note = ''
        this.addParam.is_show = ''
        this.addParam.content_type = ''
        this.addParam.content_sort = ''
        this.showAddModelFlag = false
        // 直接保存到英文
//        api.GET(helper.getManageApiUrl(apiConfig.addNewsCategory), param, res => {
//          console.log('save news to english edition success')
//        }, res => {
//          console.log('save news to english edition failed')
//        }, true)
        this.getList()
        this.getFirstLevelOption()
      }, res => {
        this.$notify({
          title: '失败',
          message: res.msg,
          type: 'fail',
          duration: 1500
        })
      })
    },
    remove (id) {
      var param = {
        id: id
      }
      this.$confirm('确认要删除此条信息吗？')
      .then(_ => {
        api.GET(helper.getManageApiUrl(apiConfig.deleteNewsCategory), param, res => {
          this.$notify({
            title: '成功',
            message: '删除成功',
            type: 'success',
            duration: 1500
          })
          this.getList()
        }, res => {
          this.$notify({
            title: '失败',
            message: '删除失败',
            type: 'error',
            duration: 1500
          })
        })
      })
      .catch(_ => {})
    },
    edit (item) {
      this.updateParam.id = item.id
      this.updateParam.name = item.name
      this.updateParam.en_name = item.en_name
      this.updateParam.name_alias = item.name_alias
      this.updateParam.pid = item.pid
      this.updateParam.type = item.type
      this.updateParam.sort = item.sort
      this.updateParam.show_type = item.show_type
      this.updateParam.note = item.note
      this.updateParam.is_show = item.is_show
      this.updateParam.content_type = item.content_type
      this.updateParam.content_sort = item.content_sort
      this.showUpdateModelFlag = true
    },
    save () {
      if (this.updateParam.name === '') {
        this.$notify({
          title: '提示',
          message: '没有填写分类名称',
          type: 'error',
          duration: 1500
        })
        return false
      }
      api.GET(helper.getManageApiUrl(apiConfig.updateNewsCategory), this.updateParam, res => {
        this.$notify({
          title: '成功',
          message: '修改成功',
          type: 'success',
          duration: 1500
        })
        this.showUpdateModelFlag = false
        this.getList()
        this.getFirstLevelOption()
      }, res => {
        this.$notify({
          title: '失败',
          message: '修改失败',
          type: 'error',
          duration: 1500
        })
      })
    },
    getLinkTypeOptions () {
      var param = {
        param: ''
      }
      api.GET(helper.getManageApiUrl(apiConfig.getAllSubject), param, res => {
        this.subjectList = res
      }, res => {
        console.log(res)
      })
    }
  }
}
</script>
<style>
  .input-group.mt {
    margin-top: 24px;
  }
</style>

